{% extends "_layouts/examples.html" %}
{% block title %}Responsive behaviours{% endblock %}


{% block style %}
<style>
.grid-demo [class*='col-']::before {
  content: "col";
}
</style>
{% endblock %}

{% block content %}
<div class="u-fixed-width">
  <h4>Stats</h4>
  <p><span class="p-muted-heading">Screen:</span> <span class="u-hide u-show--small">small</span><span class="u-hide u-show--medium">medium</span><span class="u-hide u-show--large">large</span></p>
  <p><span class="p-muted-heading">Grid:</span> <span class="u-hide u-show--small">4 columns</span><span class="u-hide u-show--medium">6 columns</span><span class="u-hide u-show--large">12 columns</span></p>
</div>

<div class="p-strip is-shallow">
  <div class="u-fixed-width">
    <h4>Grid</h4>
  </div>
  <div class="grid-demo">
    <div class="row">
      <div class="col-1 col-medium-1 col-small-1">
      </div>
      <div class="col-1 col-medium-1 col-small-1">
      </div>
      <div class="col-1 col-medium-1 col-small-1">
      </div>
      <div class="col-1 col-medium-1 col-small-1">
      </div>
      <div class="col-1 col-medium-1 col-small-1">
      </div>
      <div class="col-1 col-medium-1 col-small-1">
      </div>
      <div class="col-1 col-medium-1 col-small-1">
      </div>
      <div class="col-1 col-medium-1 col-small-1">
      </div>
      <div class="col-1 col-medium-1 col-small-1">
      </div>
      <div class="col-1 col-medium-1 col-small-1">
      </div>
      <div class="col-1 col-medium-1 col-small-1">
      </div>
      <div class="col-1 col-medium-1 col-small-1">
      </div>
    </div>
  </div>
</div>

<div class="p-strip is-shallow">
  <div class="row">
    <div class="col-6 col-medium-3">
      <h4>Hide utilities</h4>
      <p><code>u-hide--small</code>: <span class="u-hide--small">hidden when grid is 4 cols</span></p>
      <p><code>u-hide--medium</code>: <span class="u-hide--medium">hidden when grid is 6 cols</span></p>
      <p><code>u-hide--large</code>: <span class="u-hide--large">hidden when grid is 12 cols</span></p>
    </div>
    <div class="col-6 col-medium-3">
      <h4>Show utilities</h4>
      <p><code>u-show--small</code>: <span class="u-hide u-show--small">visible when grid is 4 cols</span></p>
      <p><code>u-show--medium</code>: <span class="u-hide u-show--medium">visible when grid is 6 cols</span></p>
      <p><code>u-show--large</code>: <span class="u-hide u-show--large">visible when grid is 12 cols</span></p>
    </div>
  </div>
</div>

<div class="p-strip is-shallow">
  <div class="u-fixed-width">
    <h4>Float utilities</h4>
    <div class="u-clearfix">
      <p class="u-float-left--small"><code>u-float-left--small</code></p>
      <p>This text floats next to previous element when grid is 4 cols.</p>
    </div>
    <hr />
    <div class="u-clearfix">
      <p class="u-float-left--medium"><code>u-float-left--medium</code></p>
      <p>This text floats next to previous element when grid is 6 cols.</p>
    </div>
    <hr />
    <div class="u-clearfix">
      <p class="u-float-left--large"><code>u-float-left--large</code></p>
      <p>This text floats next to previous element when grid is 12 cols.</p>
    </div>
    <hr />
    <div class="u-clearfix">
      <p class="u-float-right--small"><code>u-float-right--small</code></p>
      <p>This text floats next to previous element when grid is 4 cols.</p>
    </div>
    <hr />
    <div class="u-clearfix">
      <p class="u-float-right--medium"><code>u-float-right--medium</code></p>
      <p>This text floats next to previous element when grid is 6 cols.</p>
    </div>
    <hr />
    <div class="u-clearfix">
      <p class="u-float-right--large"><code>u-float-right--large</code></p>
      <p>This text floats next to previous element when grid is 12 cols.</p>
    </div>
  </div>
</div>

<div class="p-strip is-shallow">
  <div class="u-fixed-width">
    <h4>List stepped detailed</h4>
    <ol class="p-stepped-list--detailed">
      <li class="p-stepped-list__item">
        <h3 class="p-stepped-list__title">
          Log in to JAAS
        </h3>
        <p class="p-stepped-list__content">Ensure you have an Ubuntu SSO account before contacting JAAS. Log in to JAAS now.</p>
      </li>

      <li class="p-stepped-list__item">
        <h3 class="p-stepped-list__title">
          Configure a model
        </h3>
        <p class="p-stepped-list__content">Applications are contained within models and are installed via charms. Configure your model by pressing the "Start a new model" button.</p>
      </li>

      <li class="p-stepped-list__item">
        <h3 class="p-stepped-list__title">
          Credentials and SSH keys
        </h3>
        <p class="p-stepped-list__content">After having selected a cloud, a form will appear for submitting your credentials to JAAS. The below resources are available if you need help with gathering credentials.</p>
      </li>

      <li class="p-stepped-list__item">
        <h3 class="p-stepped-list__title">
          Design and&nbsp;<strong>build</strong>
        </h3>
        <p class="p-stepped-list__content">Together, we design your Kubernetes cluster based on your hardware, scale, roadmap, applications and monitoring system. We'll guide you through the hardware specification process to maximise the efficiency of your CAPEX, and we'll tailor the architecture of your cloud to meet your application, security, regulatory and integration requirements.</p>
      </li>
    </ol>

  </div>
</div>


<div class="p-strip is-shallow">
  <div class="u-fixed-width">
    <h4>Matrix</h4>
    <ul class="p-matrix">
      <li class="p-matrix__item">
        <img class="p-matrix__img" src="https://assets.ubuntu.com/v1/60d9b81e-picto-canonical.svg" alt="">
        <div class="p-matrix__content">
          <h3 class="p-matrix__title"><a class="p-matrix__link" href="#">Canonical</a></h3>
          <div class="p-matrix__desc">
            <p>Canonical is the global software company behind Ubuntu and is the number-one Ubuntu services provider</p>
          </div>
        </div>
      </li>
      <li class="p-matrix__item">
        <img class="p-matrix__img" src="https://assets.ubuntu.com/v1/c4f35e06-products-hero-ubuntu.svg" alt="">
        <div class="p-matrix__content">
          <h3 class="p-matrix__title"><a class="p-matrix__link" href="#">Ubuntu</a></h3>
          <div class="p-matrix__desc">
            <p>The world’s most popular Linux for servers, desktops and things, with enterprise support and enhanced security by Canonical</p>
          </div>
        </div>
      </li>
      <li class="p-matrix__item">
        <img class="p-matrix__img" src="https://assets.ubuntu.com/v1/0de4fcd5-logo-maas-icon.svg" alt="">
        <div class="p-matrix__content">
          <h3 class="p-matrix__title"><a class="p-matrix__link" href="#">MAAS</a></h3>
          <p class="p-matrix__desc">Create a bare-metal cloud with Metal as a Service for IPAM and provisioning</p>
        </div>
      </li>
      <li class="p-matrix__item">
        <img class="p-matrix__img" src="https://assets.ubuntu.com/v1/3dee82a5-landscape-logo_smaller.svg" alt="">
        <div class="p-matrix__content">
          <h3 class="p-matrix__title"><a class="p-matrix__link" href="#">Landscape</a></h3>
          <div class="p-matrix__desc">
            <p>Systems management for Ubuntu - updates, package management, repositories, security, and regulatory compliance dashboards</p>
          </div>
        </div>
      </li>
      <li class="p-matrix__item">
        <img class="p-matrix__img" src="https://assets.ubuntu.com/v1/6d382a53-image-juju-256.svg" alt="">
        <div class="p-matrix__content">
          <h3 class="p-matrix__title"><a class="p-matrix__link" href="#">Juju</a></h3>
          <p class="p-matrix__desc">Model-driven multi-cloud operations for applications. On-premise or on-cloud SAAS app store, with big data, k8s and openstack solutions</p>
        </div>
      </li>
      <li class="p-matrix__item">
        <img class="p-matrix__img" src="https://assets.ubuntu.com/v1/fffc8205-lxd-logo_smaller.svg" alt="">
        <div class="p-matrix__content">
          <h3 class="p-matrix__title"><a class="p-matrix__link" href="#">LXD</a></h3>
          <p class="p-matrix__desc">A pure-container hypervisor. Replace legacy app VMs with containers for speed and density</p>
        </div>
      </li>
      <li class="p-matrix__item">
        <img class="p-matrix__img" src="https://assets.ubuntu.com/v1/19c7461a-snapcraft-primary-icon--dark.svg" alt="">
        <div class="p-matrix__content">
          <h3 class="p-matrix__title"><a class="p-matrix__link" href="#">Snaps</a></h3>
          <div class="p-matrix__desc">
            <p>A single secure package and auto-update system for Ubuntu, Debian, Arch, Centos, Amazon Linux</p>
          </div>
        </div>
      </li>
      <li class="p-matrix__item">
        <img class="p-matrix__img" src="https://assets.ubuntu.com/v1/a7916513-picto-openstack.svg" alt="">
        <div class="p-matrix__content">
          <h3 class="p-matrix__title"><a class="p-matrix__link" href="#">OpenStack</a></h3>
          <div class="p-matrix__desc">
            <p>The world’s first choice for OpenStack - the leader in density and cost per VM</p>
          </div>
        </div>
      </li>
      <li class="p-matrix__item">
        <img class="p-matrix__img" src="https://assets.ubuntu.com/v1/b81a45e4-kubernetes.svg" alt="">
        <div class="p-matrix__content">
          <h3 class="p-matrix__title"><a class="p-matrix__link" href="#">Kubernetes</a></h3>
          <div class="p-matrix__desc">
            <p>Canonical works with Google GKE and Azure AKS for app portability between private and public infrastructure</p>
          </div>
        </div>
      </li>
    </ul>
  </div>
</div>

<div class="p-strip is-shallow">
  <div class="u-fixed-width">
    <h4>Table mobile card</h4>
    <table class="p-table--mobile-card" aria-label="Example of table transforming into mobile cards on small screens">
      <thead>
        <tr>
          <th>FQDN</th>
          <th>Power</th>
          <th>Status</th>
          <th>Owner</th>
          <th>Zone</th>
          <th class="u-align--right">Cores</th>
          <th class="u-align--right">RAM</th>
          <th class="u-align--right">Disks</th>
          <th class="u-align--right">Storage</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td data-heading="FQDN">LongEnoughToCauseEllipsis</td>
          <td data-heading="Power">On</td>
          <td data-heading="Status">Failed testing</td>
          <td data-heading="Owner">Caleb</td>
          <td data-heading="Zone">london</td>
          <td class="u-align--right"  data-heading="Cores">4</td>
          <td class="u-align--right"  data-heading="RAM">2 GiB</td>
          <td class="u-align--right"  data-heading="Disks">1</td>
          <td class="u-align--right"  data-heading="Storage long enough to cause ellipsis">2TB</td>
          <td class="has-overflow" data-heading="Actions">
            <span class="p-contextual-menu--left">
              <button class="p-contextual-menu__toggle u-no-margin--bottom" aria-controls="menu-1" aria-expanded="true" aria-haspopup="true">Actions&hellip;</button>
              <span class="p-contextual-menu__dropdown" id="menu-1" aria-hidden="false">
                <span class="p-contextual-menu__group">
                  <button class="p-contextual-menu__link">Commission</button>
                  <button class="p-contextual-menu__link">Aquire</button>
                  <button class="p-contextual-menu__link">Deploy</button>
                </span>
                <span class="p-contextual-menu__group">
                  <button class="p-contextual-menu__link">Test hardware</button>
                  <button class="p-contextual-menu__link">Rescue mode</button>
                  <button class="p-contextual-menu__link">Mark broken</button>
                </span>
              </span>
            </span>
          </td>
        </tr>
        <tr>
          <td data-heading="FQDN">upward-muskox</td>
          <td data-heading="Power">Off</td>
          <td data-heading="Status">Allocated</td>
          <td data-heading="Owner">sparkiegeek</td>
          <td data-heading="Zone">london</td>
          <td class="u-align--right"  data-heading="Cores">6</td>
          <td class="u-align--right"  data-heading="RAM">4 GiB</td>
          <td class="u-align--right"  data-heading="Disks">1</td>
          <td class="u-align--right"  data-heading="Storage">500GB</td>
          <td class="has-overflow" data-heading="Actions">
            <span class="p-contextual-menu--left">
              <button class="p-contextual-menu__toggle u-no-margin--bottom" aria-controls="menu-2" aria-expanded="false" aria-haspopup="true">Actions&hellip;</button>
              <span class="p-contextual-menu__dropdown" id="menu-2" aria-hidden="true">
                <span class="p-contextual-menu__group">
                  <button class="p-contextual-menu__link">Commission</button>
                  <button class="p-contextual-menu__link">Aquire</button>
                  <button class="p-contextual-menu__link">Deploy</button>
                </span>
                <span class="p-contextual-menu__group">
                  <button class="p-contextual-menu__link">Test hardware</button>
                  <button class="p-contextual-menu__link">Rescue mode</button>
                  <button class="p-contextual-menu__link">Mark broken</button>
                </span>
              </span>
            </span>
          </td>
        </tr>
        <tr>
          <td data-heading="FQDN">first-cattle</td>
          <td data-heading="Power">On</td>
          <td data-heading="Status">Failed to enter rescue mode</td>
          <td data-heading="Owner">admin</td>
          <td data-heading="Zone">london</td>
          <td class="u-align--right"  data-heading="Cores">8</td>
          <td class="u-align--right"  data-heading="RAM">16 GiB</td>
          <td class="u-align--right"  data-heading="Disks">3</td>
          <td class="u-align--right"  data-heading="Storage">6TB</td>
          <td class="has-overflow" data-heading="Actions">
            <span class="p-contextual-menu--left">
              <button class="p-contextual-menu__toggle u-no-margin--bottom" aria-controls="menu-3" aria-expanded="false" aria-haspopup="true">Actions&hellip;</button>
              <span class="p-contextual-menu__dropdown" id="menu-3" aria-hidden="true">
                <span class="p-contextual-menu__group">
                  <button class="p-contextual-menu__link">Commission</button>
                  <button class="p-contextual-menu__link">Aquire</button>
                  <button class="p-contextual-menu__link">Deploy</button>
                </span>
                <span class="p-contextual-menu__group">
                  <button class="p-contextual-menu__link">Test hardware</button>
                  <button class="p-contextual-menu__link">Rescue mode</button>
                  <button class="p-contextual-menu__link">Mark broken</button>
                </span>
              </span>
            </span>
          </td>
        </tr>
        <tr>
          <td data-heading="FQDN">golden-rodent</td>
          <td data-heading="Power">Off</td>
          <td data-heading="Status">Broken</td>
          <td data-heading="Owner">&mdash;</td>
          <td data-heading="Zone">london</td>
          <td class="u-align--right"  data-heading="Cores">2</td>
          <td class="u-align--right"  data-heading="RAM">1 GiB</td>
          <td class="u-align--right"  data-heading="Disks">1</td>
          <td class="u-align--right"  data-heading="Storage">240GB</td>
          <td class="has-overflow" data-heading="Actions">
            <span class="p-contextual-menu--left">
              <button class="p-contextual-menu__toggle u-no-margin--bottom" aria-controls="menu-4" aria-expanded="false" aria-haspopup="true">Actions&hellip;</button>
              <span class="p-contextual-menu__dropdown" id="menu-4" aria-hidden="true">
                <span class="p-contextual-menu__group">
                  <button class="p-contextual-menu__link">Commission</button>
                  <button class="p-contextual-menu__link">Aquire</button>
                  <button class="p-contextual-menu__link">Deploy</button>
                </span>
                <span class="p-contextual-menu__group">
                  <button class="p-contextual-menu__link">Test hardware</button>
                  <button class="p-contextual-menu__link">Rescue mode</button>
                  <button class="p-contextual-menu__link">Mark broken</button>
                </span>
              </span>
            </span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

{% endblock %}
